<template>
  <div class="course-list-container">

    <div v-for="(obj,i) in courseList" :key="obj.courseId" class="c">

      <CoursePreview :course="obj"></CoursePreview>

    </div>
  </div>
</template>

<script>
import CoursePreview from "@/components/course/CoursePreview";

export default {
  //组件名称
  name: "CourseList",
  props: ["topicId"],
  //组件注册
  components: {CoursePreview},
  //数据驱动
  data() {
    return {
      courseList: []
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    //根据主题id查询课程列表
    selectCourseListByTopicId() {
      this.axios.get(`/course/web/topic/list/${this.topicId}`)
          .then((data) => {
            this.courseList = data.data
          })
    }
  },
  //钩子函数
  mounted() {
    this.selectCourseListByTopicId();
  }
}
</script>

<style lang="less" scoped>
.course-list-container {
  display: flex;
  flex-wrap: wrap;
  .c {
    width: 20%;
  }
}
</style>